<template>
  <div>
    <Card>
      <p slot="title">
        <!-- <Icon type="ios-film-outline"></Icon> -->
        案例列表
      </p>
      <a href="#" slot="extra" @click.prevent="toAddPage">
        <Icon type="ios-loop-strong"></Icon>
        案例添加
      </a>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="proLiatColumns"
        @on-delete="handleDelete"
      />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
import { getCaseList ,caseDelete} from '@/api/caseApi'

export default {
  name: 'corporate-case-list',
  components: {
    Tables
  },
  data () {
    return {
      proLiatColumns: [
        {
          title: '案例名称',
          key: 'name',
          sortable: true
        },
        {
          title: 'LOGO',
          key: 'logo',
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: params.row.logo
                },
                style: {
                  maxWidth: '200px',
                  maxHeight: '100px'
                }
              })

            ])
          }
        },
        {
          title: '缩略图',
          key: 'cover',
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: params.row.cover
                },
                style: {
                  maxWidth: '200px',
                  maxHeight: '100px'
                }
              })

            ])
          }
        },

        {
          title: '项目链接',
          key: 'link',
          sortable: true
        },
        {
          title: '摘要',
          key: 'desc',
          sortable: true
        },
        {
          title: '操作',
          key: 'handle',
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '你确定要删除吗?'
                  },
                  on: {
                    'on-ok': () => {
                      vm.$emit('on-delete', params)
                      vm.$emit(
                        'input',
                        params.tableData.filter(
                          (item, index) => index !== params.row.initRowIndex
                        )
                      )
                    }
                  }
                },
                // [h("Button", "自定义删除")]1·
              )
            }
          ]
        }
      ],
      columns: [
        { title: 'Name', key: 'name', sortable: true },
        { title: 'Email', key: 'email', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        {
          title: 'Handle',
          key: 'handle',
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '你确定要删除吗?'
                  },
                  on: {
                    'on-ok': () => {
                      vm.$emit('on-delete', params)
                      vm.$emit(
                        'input',
                        params.tableData.filter(
                          (item, index) => index !== params.row.initRowIndex
                        )
                      )
                    }
                  }
                },
                [h('Button', '自定义删除')]
              )
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
      caseDelete( params.row.id).then(res => {
        if (res.data.msg === 0 || res.data.msg === '0') {
          // vm.$emit(
          //   "input",
          //   params.tableData.filter(
          //     (item, index) => index !== params.row.initRowIndex
          //   )
          // );
        }
      })
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      })
    },
    /**
     * 跳转到添加页面
     */
    toAddPage () {
      const route = {
        name: 'CaseAdd',
        meta: {
          title: `案例添加`
        }
      }
      this.$router.push(route)
    }
  },
  mounted () {
    // getTableData().then(res => {
    //   this.tableData = res.data;
    // });
    getCaseList({ page: 1 }).then(res => {
      console.log(res)
      this.tableData = res.data.list.data
    })
  }
}
</script>

<style scoped>

</style>
